<template>
  <div id="app">
    <header>
      <h1>PDF预览例子</h1>
      <p>
        <button @click="pdf_url='东风日产供应商购车指南.pdf'">默认文档</button>
        <button @click="pdf_url='pdf样本/1599126417040.pdf'">pdf样本/1599126417040.pdf</button>
        <button @click="pdf_url='pdf样本/转换不了.pdf'">pdf样本/转换不了.pdf</button>
        <button @click="pdf_url='pdf样本/最大.pdf'">pdf样本/最大.pdf</button>
      </p>
      <PDFFindbar :PDFViewer="PDFViewer" />
    </header>
    <PDFViewer
      class="my-pdf-viewer"
      container=".my-pdf-viewer"
      :url="pdf_url"
      @init="PDFViewer=$event" 
      @loaded="PDFDocument=$event" 
      @select="select" 
      @scoll="scoll"
      @showIcon="showIcon"/>
    <HightLight ref="hightlight" @getNote="getNote"/>
  </div>
</template>

<script>
// import PDFViewer from "./components/PDFViewer"
// import PDFFindbar from "./components/PDFFindbar"
import HelloWorld from './components/HelloWorld.vue'
import HightLight from './components/HightLight.vue'

export default {
  name: 'App',
  data(){
    return {
      pdf_url: "东风日产供应商购车指南.pdf",
      PDFDocument: null,
      PDFViewer: null,
      note:''
    }
  },
  methods: {
    onPDFInit({ PDFDocument,PDFViewer, PDFFindController }){
      this.PDFDocument = PDFDocument;
      this.PDFViewer = PDFViewer;
      this.PDFFindController = PDFFindController;
    },
    //设置图标的位置
    select($event){
      console.log('8888')
      var txt;
      if (window.getSelection) { //chrome,firefox,opera
          txt = window.getSelection().toString()
      }
      else if (document.getSelection) { //其他
          txt = document.getSelection().toString()
      }
      else if (document.selection) { //IE特有的
          txt = document.selection.createRange().text
      }
      if(txt == '') return
      this.note = txt
      this.$refs.hightlight.set({top : $event.clientY , left : $event.clientX , visiable : true});
    },
    //获取pdf滚动事件
    scoll(e){
      this.$refs.hightlight.AddIcon.visiable = false //隐藏按钮
    },
    showIcon(val){ 
      this.$refs.hightlight.AddIcon.visiable = val 
    }, 

    //获取选取文字
    getNote(){
      this.$refs.hightlight.note = this.note
      this.$refs.hightlight.AddIcon.visiable = false 
    }
  },
  components: {
    HelloWorld,
    HightLight
  }
}
</script>

<style lang="scss">
body{
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
header{
  padding-top: 60px;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  z-index: 999;
  background-color: #fff;
}
.my-pdf-viewer{
  margin-top: 200px;
  height: calc(100vh - 200px);
  overflow: auto;
}
</style>
